<template>
  <div>
    <client-only>
      <div style="height: 20px"></div>
      <!-- 两端对齐 -->
      <van-row type="flex" justify="space-between">
        <van-col span="12" style="padding-left: 5px">
          <van-button
            square
            type="danger"
            style="float: left"
            size="normal"
            @click="clickCancel"
            >取消</van-button
          >
        </van-col>
        <van-col span="12" style="padding-right: 5px">
          <van-button
            square
            type="primary"
            style="float: right"
            size="normal"
            @click="clickPost"
            >发布</van-button
          >
        </van-col>
      </van-row>

      <van-dialog
        v-model="show_dialog"
        :title="dialog_title"
        :show-confirm-button="show_dialog"
        :show-cancel-button="show_dialog"
        @confirm="onConfirm"
        @cancel="onCancel"
      >
        <Adsense
          data-ad-client="ca-pub-6243451787655828"
          data-ad-slot="4209566881"
        >
        </Adsense>
      </van-dialog>

      <div style="height: 20px"></div>

      <div class="editor"><TinyMCE ref="tinymce" /></div>
      <div style="height: 20px"></div>

      <van-uploader
        v-model="imageList"
        :max-count="12"
        preview-size="100px"
        :after-read="afterRead"
        :before-read="beforeRead"
      />

      <div style="height: 20px"></div>

      <InFeedAdsense
        data-ad-layout-key="-gw-3+1f-3d+2z"
        data-ad-client="ca-pub-6243451787655828"
        data-ad-slot="8442301843"
      >
      </InFeedAdsense>
    </client-only>
  </div>
</template>

<script>

import TinyMCE from '~/components/TinyMCE.vue'

export default {
  name: 'ShareFPV',
  components: {
    TinyMCE
  },
  props: {},
  mounted () {


  },
  data() {
    return {
      imageList: [],
      message: '',
      show_dialog: false,
      toast_post: null, //发布文章的toast提示
      dialog_title: '',

    }
  },
  methods: {
    strlen(str) {
      var len = 0
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i)
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++
        } else {
          len += 2
        }
      }
      return len
    },
    clickPost() {

      this.message = this.$refs.tinymce.getContent()

      if (this.imageList.length < 1) {
        this.$toast.fail('至少1张图片')
        return false
      }
      if (this.strlen(this.message) < 6) {
        this.$toast.fail('至少6个字')
        return false
      }

      this.toast_post = this.$toast.loading({
        message: '🚀正在发布...',
        forbidClick: true,
        duration: 0,
      })

      var formData = new FormData()

      for (let i = 0; i < this.imageList.length; i++) {
        formData.append('photos[]', this.imageList[i].content)
      }
      //
      // for (let i = 0; i < this.choosePartList.length; i++)
      // {
      //     formData.append('parts[]', this.choosePartList[i].id)
      // }

      formData.append('content', this.message)
      formData.append('type', 1)

      let that = this
      this.$axios
        .post(
          'https://www.17fpv.com/wp-json/jiangqie/v1/userpost/post-add',
          formData
        )
        .then((response) => {
          if (response.data.code == 1) {
            that.toast_post.clear()
            that.$toast.fail(response.data.msg)
          } else {
            setTimeout(function () {
              that.toast_post.clear()
              that.$toast.success(response.data.msg)

              that.$router.push({
                path: '/post-success',
              })
            }, 3000)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    clickCancel() {

      this.dialog_title = '😭真的要残忍离开吗？'
      this.show_dialog = true
    },
    onConfirm() {
      this.$router.push({
        path: '/',
      })
    },
    onCancel() {
      this.show_dialog = false
    },
    afterRead(file) {
      file.status = 'uploading'
      file.message = '上传中...'

      let lrz = require('lrz')

      //  console.log(file)
      lrz(file.file, { quality: 0.3 })
        .then(function (rst) {
          file.content = rst.base64
          file.file = rst
          file.status = ''
          file.message = ''

          // 处理成功会执行
        })
        .catch(function (err) {
          console.log(err)
          // 处理失败会执行
        })
        .always(function () {
          // 不管是成功失败，都会执行
        })
    },
    beforeRead(file) {
      const imageType = ['image/png', 'image/jpeg', 'image/webp']
      if (file.type == 'image/gif') {
        this.$toast('不能上传GIF动图')
        return false
      }
      if (imageType.indexOf(file.type) < 0) {
        this.$toast('请上传图片格式！')
        return false
      }
      return true
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-sidebar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 2px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.van-sidebar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px grey;
  background: white;
}

.van-sidebar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px white;
  border-radius: 10px;
  background: white;
}

.search::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 2px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.search::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px grey;
  background: white;
}

.search::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px white;
  border-radius: 10px;
  background: white;
}

.delete-button {
  height: 100%;
}

.van-tag--danger {
  margin-top: 5px;
}

.van-uploader {
  padding: 15px;
}

.van-cell__value--alone {
  font-size: 16px;
}

.van-field {
  font-size: 16px;
}

.van-dialog {
  border-radius: 5px;
}

.editor {
  padding: 0 5px;
}
</style>
